<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <script src="../js/rem.js"></script>
    <link rel="stylesheet"  type="text/css" href="../bootstrap/bootstrap.min.css">

    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">  
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">    
    <script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>  
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>
    <link rel="stylesheet" type="text/css" href="../css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css">
    <link rel="stylesheet" type="text/css" href="../css/index.css">
    <title>首页</title>
</head>
<body>
        <div class="nav clearfix"></div>
        <!-- 轮播图 -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="../img/custom1.jpg" >
                </div>
                <div class="swiper-slide">
                    <img src="../img/custom2.jpg" >
                </div>
                <div class="swiper-slide">
                    <img src="../img/custom3.jpg" >
                </div>
                <div class="swiper-slide">
                    <img src="../img/custom4.jpg" >
                </div>
                <div class="swiper-slide">
                    <img src="../img/custom5.jpg" >
                </div>
            </div>

            <div class="swiper-pagination"></div>
        </div>
        <!-- 产品优势 -->
        <div class="indexService">
            <div class="indexService-container animate__animated animate__fadeIn">
                <div class="container-title">
                    <div>产品优势</div>
                    <div>自主研发，自己制造，能大幅增加营业额的自动售货机</div>
                </div>
                <div class="product-advantages">
                    <ul class="clearfix">
                        <li>
                            <div class="iconfont icon-youxiu"></div>
                            <div>品优不贵</div>
                        </li>
                        <li>
                            <div class="iconfont icon-mount"></div>
                            <div>销量翻倍</div>
                        </li>
                        <li>
                            <div class="iconfont icon-zidongshouhuoji1"></div>
                            <div>整机发泡</div>
                        </li>
                        <li>
                            <div class="iconfont icon-wendu"></div>
                            <div>恒温恒湿</div>
                        </li>
                        <li>
                            <div class="iconfont icon-xianlushichang"></div>
                            <div>药品专用货道</div>
                        </li>
                        <li>
                            <div class="iconfont icon-shuben_A"></div>
                            <div>电子烟专用货道</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 品优不贵 -->
        <div class="indexService">
            <div class="indexService-container animate__animated animate__fadeIn">
                <div class="container-title">
                    <div>品优不贵</div>
                    <div>规模化流水线生产</div>
                </div>
            </div>   
        </div>
        <div class="optimal-bg"></div>

        <!-- 热销产品 -->
        <div class="indexService indexCase">
            <div class="indexService-container animate__animated animate__fadeIn">
                <div class="container-title">
                    <div>热销产品</div>
                    <div>经典机型，更具性价比</div>
                </div>
                <div class="content clearfix">

                </div>
                <div class="more">
                    <span>查看更多</span>
                </div>
            </div>
        </div>

        <!-- 销量翻倍 -->
        <div class="indexService">
            <div class="indexService-container animate__animated animate__fadeIn">
                <div class="container-title">
                    <div>品优不贵，销量翻倍，我们是如何做到的？</div>
                    <div>提供全系列智能自动售货机及零售解决方案</div>
                </div>
            </div>
        </div>
        <div class="sales-bg"></div>

        <!-- 软件系统 -->
        <div class="indexService" style="overflow: hidden;">
            <div class="indexService-container animate__animated animate__fadeIn">
                <div class="container-title">
                    <div>创新型智慧售货云平台软件系统</div>
                    <div>一站式售货机系统解决方案</div>
                </div>
                <div class="system">
                    <div class="system-item">
                        <div class="system-title">售卖管理</div>
                        <div class="system-content">实时销售数据、库存状态、设备运行状态等重要运营数据，远程监控，尽在掌握</div>
                        <div class="classification">
                            <div class="classification-list">
                                <div class="iconfont icon-jiankong"></div>
                                <div class="text">运营监控</div>
                            </div>
                            <div class="classification-list">
                                <div class="iconfont icon-zidongshouhuoji1"></div>
                                <div class="text">货机管理</div>
                            </div>
                            <div class="classification-list">
                                <div class="iconfont icon-shujutubiaobingtu-3"></div>
                                <div class="text">售卖统计</div>
                            </div>
                            <div class="classification-list">
                                <div class="iconfont icon-cunqian"></div>
                                <div class="text">个人结算</div>
                            </div>
                        </div>
                    </div>
                    <div class="line"></div>
                    <div class="system-item">
                        <div class="system-title">进销存管理</div>
                        <div class="system-content">集合了进货、销售、库存等一系列功能，财务、采购一体化，利润核算实时掌握</div>
                        <div class="classification">
                            <div class="classification-list">
                                <div class="iconfont icon-xiaoliang"></div>
                                <div class="text">进货订单</div>
                            </div>
                            <div class="classification-list">
                                <div class="iconfont icon-xiaochengxuduandianpu"></div>
                                <div class="text">销售管理</div>
                            </div>
                            <div class="classification-list">
                                <div class="iconfont icon-iconfontgongyingshang"></div>
                                <div class="text">库存管理</div>
                            </div>
                            <div class="classification-list">
                                <div class="iconfont icon-mount"></div>
                                <div class="text">报表统计</div>
                            </div>
                        </div>
                    </div>
                    <div class="line"></div>
                    <div class="system-item">
                        <div class="system-title">会员管理</div>
                        <div class="system-content">会员管理系统可满足您对指定类型的顾客做打折促销、节日活动，轻松维护老顾客</div>
                        <div class="classification">
                            <div class="classification-list">
                                <div class="iconfont icon-huiyuan"></div>
                                <div class="text">会员注册</div>
                            </div>
                            <div class="classification-list">
                                <div class="iconfont icon-liwu"></div>
                                <div class="text">积分兑换</div>
                            </div>
                            <div class="classification-list">
                                <div class="iconfont icon-biaoqian"></div>
                                <div class="text">打折促销</div>
                            </div>
                            <div class="classification-list">
                                <div class="iconfont icon-hiliaotian"></div>
                                <div class="text">嗨购玩法</div>
                            </div>
                        </div>
                    </div>
                    <div class="line"></div>
                    <div class="system-item">
                        <div class="system-title">特色功能</div>
                        <div class="system-content">根据企业行业特点和自身需求，可定制个性化开发，为您定制适配的整体解决方案</div>
                        <div class="classification">
                            <div class="classification-list">
                                <div class="iconfont icon-xinxi"></div>
                                <div class="text">异常反馈</div>
                            </div>
                            <div class="classification-list">
                                <div class="iconfont icon-shoujijiankong"></div>
                                <div class="text">手机管理</div>
                            </div>
                            <div class="classification-list">
                                <div class="iconfont icon-jiaose"></div>
                                <div class="text">角色管理</div>
                            </div>
                            <div class="classification-list">
                                <div class="iconfont icon-ad"></div>
                                <div class="text">广告下发</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 我们的优势 -->
        <div class="advantage">
            <div class="advantage-bg">
                <div class="num-list">
                    <div class="num">
                        <div class="num-title">
                            <span>5</span>
                        </div>
                        <div class="num-body">
                            <div>5大产品系列，20余款机型+多种定制机型</div>
                            <div>提供无人智能售货全场景解决方案</div>
                        </div>
                    </div>
                    <div class="num">
                        <div class="num-title">
                            <span>6</span>
                        </div>
                        <div class="num-body">
                            <div>6年自动售货机及相关行业</div>
                            <div>设计、制造、服务经验</div>
                        </div>
                    </div>
                    <div class="num">
                        <div class="num-title">
                            <span>150</span>
                        </div>
                        <div class="num-body">
                            <div>公司员工一百五十余人</div>
                            <div>技术团队多达二十余人</div>
                        </div>
                    </div>
                    <div class="num">
                        <div class="num-title">
                            <span>30000</span>
                        </div>
                        <div class="num-body">
                            <div>厂区占地三万多平方米</div>
                            <div>拥有下料、钣金、发泡、喷涂、总装、测试等现代化生产线</div>
                        </div>
                    </div>
                </div>
            </div>        
        </div>

        <!-- 我们的合作伙伴 -->
        <div class="indexService">
            <div class="indexService-container animate__animated animate__fadeIn">
                <div class="container-title partner-title">
                    <div>我们的合作伙伴</div>
                    <div>与国内各大品牌长期保持着良好的合作关系，为众多优秀品牌客户提供了强有力的支持</div>
                </div>
                <ul class="partner">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>

        <!-- 回到顶部 -->
        <ul class="top"></ul> 

        <!-- 底部 -->
        <div class="footer"></div>

    

    <script type="module">
        // 轮播图
        import Swiper from 'https://unpkg.com/swiper/swiper-bundle.esm.browser.min.js'
        var mySwiper = new Swiper ('.swiper-container', {
            // direction: 'vertical', // 垂直切换选项
            loop: true, // 循环模式选项
            autoplay:true,
            pagination:{
                el: '.swiper-pagination',
            },
            // 如果需要前进后退按钮
            navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
            },
            
        })     

    </script>


    <!-- 加载 nav footer 模块 -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" ></script>
    <script src="../js/common.js"></script>


    <script>


        function toDetail(id){
            window.open('./detail.html?id='+id)
        }

        function toBuy(url){
            window.open(url)
        }


        $('.classification-list').on("click",function(e){
            window.open('./system.html')
        })
        $('.more').on("click",function(e){
            window.open('./productClass.html')
        })

        

        function getDeviceList(){
            $.ajax({
                type: "GET",
                url: "http://www.yingliyun.com:40511/indexController/findIndexDeviceList",
                dataType: 'JSON',
                success: function(data){
                    let arr = data.data.list.splice(8)
                    let str = ''
                    for(let i=0; i<arr.length;i++){
                        str += `
                            <div class="content-list">
                                <div class="list-img" onclick="toDetail('${arr[i].id}')">
                                    <img src="${arr[i].titleImg.split(',')[0]}" alt="" srcset="">
                                    <div class="mark"></div>
                                    <div class="loading">
                                        <img src="../img/images/bn7.png" alt="">
                                    </div>
                                    <div class="link iconfont icon-lianjie"></div>
                                </div>
                                <div class="product">
                                    <div class="productName">
                                        <div>
                                            <strong>机型：${arr[i].deviceType}</strong>
                                            <i>|</i>
                                            <span title="${arr[i].deviceName}">${arr[i].deviceName}</span>
                                        </div>
                                        
                                    </div>
                                    <div class="product-detail iconfont icon-youjiantou" onclick="toBuy('${arr[i].deviceUrl}')"></div>
                                </div>
                            </div>                                              
                            `
                    }

                    $('.content').append(str)

                },
                error: function(e){
                    alert(JSON.stringify(e));
                }
            })
        } 


        $(function(){
            getDeviceList()
        })

        
    </script>
</body>
</html>